<%--
  Created by IntelliJ IDEA.
  User: 赵懒洋
  Date: 2020/7/25
  Time: 12:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="iframe-h">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
</head>

<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline tool-btn">
                    <button class="layui-btn layui-btn-small layui-btn-danger delete_all"  data-url="article-add.html"><i class="layui-icon">&#xe640;</i></button>
                </div>
                <div class="layui-inline">
                    <input type="text" name="input_orderid" required lay-verify="required" placeholder="请输入订单编号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-inline">
                    <input type="text" name="input_housename" required lay-verify="required" placeholder="请输入仓库名" autocomplete="off" class="layui-input">
                </div>
                <button type="button" id="start_seach" class="layui-btn">搜索</button>
                <button type="button" id="clean_seach" class="layui-btn layui-btn-normal">清除搜索</button>
            </div>
        </form>
        <div class="" id="table-list">
            <table class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="50">
                    <col class="hidden-xs" width="50">
                    <col class="hidden-xs" width="100">
                    <col>
                    <col class="hidden-xs" width="150">
                    <col class="hidden-xs" width="150">
                    <col width="80">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th><input id="checkedAll" type="checkbox" value="1" style='display: inline;margin-top: 13px;'></th>
                    <th class="hidden-xs">ID</th>
                    <th class="hidden-xs">仓库名</th>
                    <th>工作人员</th>
                    <th class="hidden-xs">订单编号</th>
                    <th class="hidden-xs">商品类型</th>
                    <th style="padding: 12px;">物品重量</th>
                    <th>入库时间</th>
                    <th>下一站仓库</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="table_list">
                <!--<tr>
                    <td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
                    <td class="hidden-xs">1</td>
                    <td class="hidden-xs">内蒙古仓库</td>
                    <td>刘先生</td>
                    <td class="hidden-xs">20200121</td>
                    <td class="hidden-xs">易碎物品</td>
                    <td>45kg</td>
                    <td>20200121</td>
                    <td>下一站：北京</td>
                    <td>
                        <button class="layui-btn layui-btn-mini layui-btn-danger del-btn" data-id="1" data-url="del.html"><i class="layui-icon">&#xe640;</i></button>
                    </td>
                </tr>-->
                </tbody>
            </table>
            <!--分页-->
            <div class="page-wrap">
               <%-- <ul class="pagination">
                    <li class="disabled"><span>«</span></li>
                    <li class="active"><span>1</span></li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">»</a>
                    </li>
                </ul>--%>
            </div>
        </div>
    </div>
</div>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
<script>
    $(document).ready(function () {
        var pageNum = 1;
        var pageSize = 1;
        // 1.一进入页面发送请求，获取入库信息列表
        sendAjax(pageNum, pageSize);

        // 2.分页事件
        // 2.1.页码点击事件
        $(document).on("click",".pagination a",function () {

            var pageNum = $(this).prop("title");
            console.log("选择：=============== "+$("#selectPageSize").val());
            sendAjax(pageNum, $("#selectPageSize").val());
        });
        // 2.2.选择显示条数点击
        $(document).on("change","#selectPageSize",function () {
            var pageSize = $("#selectPageSize").val();
            // console.log("选择数：" + pageSize);
            sendAjax(1, pageSize);
        });

        // 3.搜索事件
        $(document).on("click","#start_seach",function () {
            // alert("..........")
            var pageSize = $("#selectPageSize").val();
            sendAjax(1, pageSize);
        });
        // 3.1.清除搜索框
        $(document).on("click","#clean_seach",function () {
            // 清空输入框和选择框
            $("input[name='input_orderid']").val("");
            $("input[name='input_housename']").val("");
            sendAjax(1, $("#selectPageSize").val());
        });

        // 4.删除事件
        $(document).on("click",".del-btn",function () {
            if (window.confirm("确定要批量删除？")){
                var orderId = $(this).parent().siblings("#orderId").attr("data-id");
                console.log("orderID："+orderId)
                sendAjax2(orderId);
            }
        });
        // 4.1.批量删除事件
        $(document).on("click",".delete_all",function(){
            // 获取复选框被选中的
            if (window.confirm("确定要批量删除？")){
                $("input[name=checked]").each(function(){
                    if($(this).prop("checked")){
                        var orderId = $(this).parent().siblings("#orderId").attr("data-id");
                        console.log("批量删除："+ $(this).parent().siblings("#userNo").attr("data-id"))
                        // 发送删除请求
                        sendAjax2(orderId);
                    }
                });
            }
        });

        // 4.2.当点击单个复选框时，若点击数量==当前页的复选框数时，全选按钮被选中
        // 当点击单个复选框时，若点击数量==当前页的复选框数时，全选按钮被选中
        $(document).on("click","input[name = checked]",function(){
            // console.log("================复选框")
            var count = 0;
            $("input[name = checked]").each(function(){
                var length = $("input[name = checked]").length;
                // console.log("长度："+length);
                if($(this).prop("checked")){
                    count++;
                }
                // console.log("count  "+count)
                if(count == length){
                    console.log("========================")
                    // 复选框全选时，全选框被选中
                    $("#checkedAll").prop("checked",true);
                }else{
                    // 复选框没有被全选中。全选框取消选中
                    $("#checkedAll").prop("checked",false);
                }
            });
        });
        // 4.3.当点击全选时，选中所有框; 再次点击，取消所有框
        $(document).on("click","#checkedAll",function(){
            var checkedAll = $("#checkedAll").prop('checked');
            // console.log("全选值："+checkedAll);
            if(checkedAll == true){
                $("input[name = checked]").prop("checked",true);//全选
            }else if(checkedAll == false){
                $("input[name = checked]").prop("checked",false);//全不选
            }
        });

    });

    // 5.发送请求入库信息列表
    function sendAjax(pageNum, pageSize) {
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/inStore/findInStoreList",
            type:"GET",
            data:{pageNum:pageNum,
                pageSize:pageSize,
                opCode:1,
                houseName:$("input[name='input_housename']").val(),
                orderId:$("input[name='input_orderid']").val()},
            dataType:"json",
            success:function (result) {
                // 调用渲染数据函数
                showData(result);
            },
            error:function () {
                alert("异步请求失败！")
            }
        });
    }

    // 6.发送删除请求
    function sendAjax2(orderId) {
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/inStore/delete",
            type:"GET",
            data:{orderId:orderId},
            dataType:"json",
            success:function (result) {
                sendAjax($(".pageNum").prop("title"), $("#selectPageSize").val());
            },
            error:function () {
                alert("异步请求失败！")
            }
        });
    }

    // 7.渲染数据（表格信息和分页信息）
    function showData(result) {
        var content = "";
        // 渲染表格信息
        $.each(result.list,function (index,Track) {
            content += "<tr>\n" +
                "<td><input type=\"checkbox\" name=\"checked\" data-id=\"1\" style='display: inherit;'></td>\n" +
                "<td class=\"hidden-xs\">"+Track.house.houseId+"</td>\n" +
                "<td class=\"hidden-xs\">"+Track.house.houseName+"</td>\n" +
                "<td>"+Track.houseManager.houseManagerName+"</td>\n" +
                "<td id='orderId' class=\"hidden-xs\" data-id='"+Track.order.orderId+"'>"+Track.order.orderId+"</td>\n" +
                "<td class=\"hidden-xs\">"+Track.order.type.typeName+"</td>\n" +
                "<td>"+Track.order.weight+"kg</td>\n" +
                "<td>"+Track.dateTime+"</td>\n" +
                "<td>"+Track.nextHouse+"</td>\n" +
                "<td>\n" +
                "<button class=\"layui-btn layui-btn-mini layui-btn-danger del-btn\" data-id=\"1\"><i class=\"layui-icon\">&#xe640;</i></button>\n" +
                "</td>\n" +
                "</tr>";
        });

        $(".table_list").html(content);

        // 分页数据渲染
        var pageContent = "<span class=\"layui-laypage-count\" style='border: 1px solid;padding: 2px;color: #d2d2d2!important;'>共"+" "+result.total+" "+"条</span>";

        // 首页+上一页
        if(result.pageNum == 1){
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='1' style='border: 1px solid;padding: 2px;color: #d2d2d2!important;'>首页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='1' style='border: 1px solid;padding: 2px;color: #d2d2d2!important;'>上一页</a>";
        }else{
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev\" data-page=\"0\" title='1' style='border: 1px solid;padding: 2px;'>首页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev\" data-page=\"0\" title='"+result.prePage+"' style='border: 1px solid;padding: 2px;'>上一页</a>";
        }

        // 页码
        for(var i=1;i<=result.pages;i++){
            if(result.pageNum == i){
                pageContent += "<span class=\"layui-laypage-curr pageNum\" title='"+i+"'><em class=\"layui-laypage-em\" ></em><em style='border: 1px solid;padding: 2px;padding-left: 8px;padding-right: 8px;background-color: #009688;'>"+i+"</em></span>";
            }else{
                pageContent +="<a href=\"#\" class=\"layui-laypage-prev pageNum\" data-page=\"0\" title='"+i+"' style='border: 1px solid;padding: 2px;padding-left: 8px;padding-right: 8px;background-color: #009688;'>"+i+"</a>";
            }
        }

        // 下一页+尾页
        if(result.pageNum == result.pages){
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='"+result.pages+"' style='border: 1px solid;padding: 2px;color: #d2d2d2!important;'>下一页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='"+result.pages+"' style='border: 1px solid;padding: 2px;color: #d2d2d2!important;'>尾页</a>"
        }else{
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev \" data-page=\"0\" title='"+result.nextPage+"' style='border: 1px solid;padding: 2px;'>下一页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev \" data-page=\"0\" title='"+result.pages+"' style='border: 1px solid;padding: 2px;'>尾页</a>";
        }

        // 选择条数
        pageContent += "<span class=\"layui-laypage-limits\">\n" +
            "                    <select id='selectPageSize' lay-ignore=\"\" style='display: inline-block;'>\n" +
            "<option value=\"1\">1 条/页</option>\n";
        if(result.pageSize == 3){
            pageContent += "<option value=\"3\" selected>3 条/页</option>";
        }else {
            pageContent += "<option value=\"3\">3 条/页</option>";
        } if(result.pageSize == 5){
            pageContent += "<option value=\"5\" selected>5 条/页</option>";
        }else {
            pageContent += "<option value=\"5\">5 条/页</option>";
        } if(result.pageSize == 10){
            pageContent += "<option value=\"10\" selected>10 条/页</option>";
        }else {
            pageContent += "<option value=\"10\">10 条/页</option>";
        } if(result.pageSize == 20){
            pageContent += "<option value=\"20\" selected>20 条/页</option>";
        }else {
            pageContent += "<option value=\"20\">20 条/页</option>";
        }

        $(".page-wrap").html(pageContent);

    }

</script>
</html>